<!DOCTYPE HTML>
<html>
<head>
    <meta name="mobileoptimized" content="800" />
    <meta name="viewport" content="user-scalable=no" />
    <title>PhoneGap - WP7 : Proof of concept</title>
    <link rel="stylesheet" type="text/css" href="jquery.mobile-1.0b2.css" />
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0b2.js"></script>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript">
        var oaId = 0;
        var obId = 0;

        oaWatcher = function (newOrientation) {
            oa.innerHTML = newOrientation;
        };

        obWatcher = function (newOrientation) {
            ob.innerHTML = newOrientation;
        };

        function onLoad() {
            try {

                if (PhoneGap.available) {
                    window.debug.log('PhoneGap is available!');
                    window.debug.log(navigator);
                }
                else {
                    window.debug.error('PhoneGap not available');
                }
            } catch (e) {
                alert(e.description);
            }
        }

        var objCameraOptions = { destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100 }
    </script>

</head>
<body>
    <div data-role="page" id="jqm-home" class="type-home">
        <div data-role="header" data-position="inline" data-theme="c">
            <h1>
                PhoneGap WP7</h1>
        </div>
        <div data-role="content">
            <div class="content-secondary">
                <ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="b"
                    data-icon="arrow-r" data-iconpos="right">
                    <li data-role="list-divider">Device</li>
                    <li onclick="navigator.notification.alert(device.platform, 'Device Platform');">Device
                        Platform</li>
                    <li onclick="navigator.notification.alert(device.version, 'Device Version');">Device
                        Version</li>
                    <li onclick="navigator.notification.alert(device.name, 'Device Name');">Device Name</li>
                    <li onclick="navigator.notification.alert(device.uuid, 'Device UUID');">Device UUID</li>
                    <li onclick="navigator.notification.alert(device.gap, 'Device Gap');">Device Gap</li>
                    <li data-role="list-divider">Default</li>
                    <li onclick="navigator.notification.alert('this is a sample alert message', 'Attention');">
                        Show Alert</li>
                    <li onclick="navigator.notification.confirm('this is a sample confirm message',function(reslt){navigator.notification.alert(reslt,'Result','Ok');}, 'Attention',null);">
                        Show Confirm</li>
                    <li onclick="navigator.notification.beep(4);">Beep 4 times</li>
                    <li onclick="navigator.notification.vibrate(500);">Vibrate</li>
                    <li data-role="list-divider">Sensors</li>
                    <!--<li onclick="navigator.accelerometer.getCurrentAcceleration(function(val){navigator.notification.alert('X: '+val.x+'  Y: '+val.y+'  Z: '+val.z, 'Acceleration', 'Ok');}, function(val){navigator.notification.alert('getCurrentAcceleration: '+val, 'Error', 'Ok');}, null);">Current Acceleration</li>-->
                    <li><a href="Accelerometer.html">Accelerometer Demo</a></li>
                    <li onclick="navigator.orientation.getCurrentOrientation(function(val){navigator.notification.alert(val, 'Orientation', 'Ok');}, null);">
                        Current Orientation</li>
                    <li onclick="oaId = navigator.orientation.watchOrientation(oaWatcher, null);">Watch
                        orientation A
                        <br />
                        <div id="oa">
                        </div>
                    </li>
                    <li onclick="navigator.orientation.clearWatch(oaId);">Clear watch A</li>
                    <li onclick="obId = navigator.orientation.watchOrientation(obWatcher, null);">Watch
                        orientation B
                        <br />
                        <div id="ob">
                        </div>
                    </li>
                    <li onclick="navigator.orientation.clearWatch(obId);">Clear watch B</li>
                    <li data-role="list-divider">Media/Camera</li>
                    <li onclick="navigator.camera.getPicture(function(imagestring){navigator.notification.alert(imagestring, 'Base64', 'Ok');}, function(val){navigator.notification.alert('getPicture: '+val, 'Error', 'Ok');}, objCameraOptions);">
                        Get Picture from Camera</li>
                    <li data-role="list-divider">Geolocation</li>
                    <li onclick="navigator.geolocation.getCurrentPosition(function(position){navigator.notification.alert(position.coords.latitude+','+position.coords.longitude, 'Location', 'Ok');}, function(val){navigator.notification.alert('getCurrentPosition: '+val, 'Error', 'Ok');}, true);">
                        Current Position</li>
                    <li data-role="list-divider">Network</li>
                    <li onclick="navigator.network.isReachable('http:\/\/www.google.com\/', function(val){navigator.notification.alert(val, 'is reachable', 'Ok');}, null);">
                        Is Google reachable?</li>
                    <li data-role="list-divider">Telephony</li>
                    <li onclick="navigator.sms.send('+447970123456', 'test message', null, null, null);">
                        Send SMS</li>
                    <li onclick="navigator.telephony.call('07123456789');">CALL 07123456789</li>
                </ul>
            </div>
            <!-- This image has been included to prove it can be done -->
            <!--<img alt="PhoneGap" src="pg_logo.png" />-->
        </div>
    </div>
</body>
</html>
